Combining symbol with use SVG tags on a HTML page

150

Combining <symbol> with <use> SVG tags on a HTML page </use></symbol> -

&lt;svg xmlns="http://www.w3.org/2000/svg" style="display:none"&gt;  
  &lt;symbol id="shapes-square" viewBox="0 0 195.74 129.42"&gt; 
      &lt;rect x="0.5" y="0.5" width="194.74" height="128.42" fill="blue" stroke="#000" stroke-miterlimit="10"/&gt;
  &lt;/symbol&gt;
&lt;/svg&gt;

&lt;!-- Declare Initial 'use' of SVG --&gt;
&lt;div id="box1"&gt;
  &lt;svg&gt;
      &lt;title&gt;Blue Square 1&lt;/title&gt;
      &lt;use href="#shapes-square"/&gt;
  &lt;/svg&gt;
&lt;/div&gt;

&lt;br /&gt;

&lt;!-- Div to hold the second 'use' of the SVG --&gt;
&lt;div id="box2"&gt;
   &lt;svg&gt;
      &lt;title&gt;Blue Square 2&lt;/title&gt;
    &lt;use href="#shapes-square" /&gt;
  &lt;/svg&gt;
&lt;/div&gt;
 Run code snippet

Comments

Submit
0 Comments